<template>
  <div>
    <router-link to="./course">课程</router-link>

    <div class="block" style="margin-top:50px;margin-bottom:20px">
      <span class="demonstration">日期选择:</span>
      <el-date-picker
          v-model="myDate"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
      />
    </div>
    <el-button type="primary" v-model="flag" @click="changeFlag" size="mini" v-permission="'vue:test:setting'">选择今日之前/后</el-button>
  </div>
</template>

<script>
export default {
  name: "home.vue",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      myDate: '',
      flag: true
    };
  },
  methods: {
    changeFlag() {
      this.flag = !this.flag
      console.log(this.flag)

      if(this.flag === false){
        this.pickerOptions = {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
        }
      }else{
        this.pickerOptions = {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        }
      }

    }
  }
}
</script>

<style scoped>

</style>
